<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>两个数字的平均值为{{aveRes}}</p>
        <!--
            v-on除了可以监听系统事件，也可以监听vue的自定义事件
            一个组件如果监听了某个子组件的事件，子组件在发射事件时父组件就能接收并触发绑定函数了
        -->
        <ave v-on:calc='receive'></ave>
    </div>
    <script src='vue.js'></script>
    <script type='text/index' id='ave'>
        <div>
            <input v-model.number="n1" v-on:input='calcClick'/>
            <input v-model.number='n2' />
            <button v-on:click='calcClick'>计算</button>
        </div>
    </script>
    <script>
        Vue.component('ave',{
            template:'#ave',
            // 子组件中的data必须是一个函数，保证每个组件的数据都是独立的，降低耦合度
            data:function(){
                return {
                    n1:0,
                    n2:0,
                }
            },
            methods:{
                calcClick(){
                    var average = (this.n1+this.n2)/2
                    /*
                    $emit(事件名称，事件附带的数据)向父组件发射一个事件，父组件如果监听了这个事件，那么这个事件会被调用
                    参数一：事件名称 不能与系统事件重名
                    参数二:附带的数据 如果传递多个，封装为函数
                    */
                    this.$emit('calc',average)
                }
            },
            /*
            watch变量的监听函数，用于监视组件中的某个数据的变化，数据一旦发生变化，函数就会被调用
            */
            watch:{
                n2:function(){
                    this.calcClick()
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                aveRes:0
            },
            methods:{
                /*
                如果函数绑定的是一个自定义事件，那么函数的参数就是组件发射事件时所附带的数据
                */
                receive(e){
                    // console.dir(arguments)
                    // console.log('收到子组件发射的事件了')
                    this.aveRes = e
                }
            }
        })
    </script>
</body>
</html>